<template>
  <el-scrollbar class="section_con">
    <div class="push_con">
      <div class="push_header">
        <span class="big_title">发布设置</span>
        <span>（发布民主测评表之前请先进行发布设置，发布后不可修改）</span>
      </div>
      <div class="push_body">
        <div class="body_title">
          <span class="big_title">设置民主测评会召开时间</span>
          <span>（投票时间即为民主测评会开始和结束时间）</span>
        </div>
        <el-row>
          <el-col :span="11">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              placeholder="请选择开始时间"
              v-model="form.startTime"
              style="width: 100%"
              size="small"
              @change="onStChange"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              placeholder="请选择结束时间"
              v-model="form.endTime"
              style="width: 100%"
              size="small"
              @change="onEtChange"></el-date-picker>
          </el-col>
        </el-row>
        <div class="body_title">
          <span class="big_title">
            设置参加本次民主测评会的
            <strong class="bold">投票人员</strong>
          </span>
          <span>（设置发布后， 系统会根据投票人员数量生成对应数量的投票随机码）</span>
        </div>
        <p class="peopleNum">已选择{{ checkResult.length }}人</p>
        <vxe-table
          class="mytable-scrollbar"
          border
          stripe
          height="500px"
          row-id="id"
          size="medium"
          resizable
          :loading="loading2"
          :scroll-y="{ enabled: false }"
          :data="tableData"
          :header-cell-class-name="headerStyle"
          :row-class-name="rowClass"
          :checkbox-config="{
            highlight: true,
            range: false,
            checkRowKeys: checkRowKeys,
          }"
          highlight-hover-row
          @checkbox-change="onTableCheckChange"
          @checkbox-all="onTableCheckAll"
          ref="xtable">
          <vxe-column type="checkbox" width="40" fixed="left"></vxe-column>
          <vxe-column type="seq" title="序号" width="100" align="center" fixed="left"></vxe-column>
          <vxe-column field="userName" title="人员" align="center" min-width="150" fixed="left"></vxe-column>
          <vxe-column field="telephone" title="手机号" align="center" min-width="200" fixed="left"></vxe-column>
          <vxe-column field="userOrgName" title="单位名称" min-width="200" align="center"></vxe-column>
        </vxe-table>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { getAssessmentDetail, updateAssessment, listAssessmentPerson, releaseAssessment } from '@apis/mzEvaluation.js'
import { formatDate } from '@utility/utility'
export default {
  name: 'EvaluationPush',
  props: {
    activeSteps: Number,
  },
  emits: ['pushSuccess'],
  data() {
    return {
      tableData: [],
      checkResult: [],
      loading: false,
      loading2: false,
      id: this.$route.query.id || '',
      form: {
        startTime: '',
        endTime: '',
      },
      checkRowKeys: [],
    }
  },
  watch: {
    '$route.query': {
      handler(obj) {
        if (obj && obj.id) {
          this.id = obj.id
          this.initdata()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initdata()
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      if (!this.id) return
      if (this.loading) return
      this.loading = true
      getAssessmentDetail({
        id: this.id,
      }).then(res => {
        this.loading = false
        const data = res.data
        this.form = { ...data }
        if (!data.startTime) {
          this.form.startTime = formatDate(new Date().toLocaleString(), 'yyyy-MM-dd hh:mm')
        }
        if (!data.endTime) {
          // 7200000
          this.form.endTime = formatDate((new Date().getTime() + 7200000).toLocaleString(), 'yyyy-MM-dd hh:mm')
        }
        if (this.form.assessmentStatus >= 1) {
          this.initlistAssessmentPersondata()
        }
      })
    },
    /* 初始化 */
    initlistAssessmentPersondata() {
      listAssessmentPerson({
        pageNum: 1,
        pageSize: 1000,
      }).then(res => {
        const data = res.data
        this.tableData = data.content
        if (this.form.assessmentPersons.length === 0) {
          this.checkResult = this.tableData
          this.form.assessmentPersons = [...this.checkResult]
          this.submitrRealTimeData()
        } else {
          this.checkResult = [...this.form.assessmentPersons]
        }
        this.checkRowKeys = this.checkResult.map(item => item.id)
      })
    },
    /* 监听CheckBox变化 */
    onTableCheckChange(e) {
      const row = e.row
      if (e.checked) {
        this.checkResult.push(row)
        this.checkResult = [...new Set(this.checkResult)]
      } else {
        this.checkResult = this.checkResult.filter(item => item.id !== row.id)
      }
      this.form.assessmentPersons = [...this.checkResult]
      this.submitrRealTimeData()
    },
    /* 监听CheckBox全选变化 */
    onTableCheckAll(e) {
      const records = e.records
      if (records.length > 0) {
        this.checkResult = [...new Set(records.map(item => item))]
      } else {
        this.checkResult = []
      }
      this.form.assessmentPersons = [...this.checkResult]
      this.submitrRealTimeData()
    },
    /* 监听开始时间 */
    onStChange(e) {
      this.submitrRealTimeData()
    },
    /* 监听结束时间 */
    onEtChange() {
      this.submitrRealTimeData()
    },
    /* 提交数据 */
    submitrRealTimeData() {
      updateAssessment({
        endTime: this.form.endTime,
        startTime: this.form.startTime,
        id: this.form.id,
        assessmentPersons: this.form.assessmentPersons,
      }).then(res => {
        // const data = res.data
        if (res.status === 200) {
          this.$message.success(res.message)
        }
      })
    },
    setData() {
      if (!this.form.startTime) {
        this.$message.error('开始时间不能为空')
        return false
      }
      if (!this.form.endTime) {
        this.$message.error('结束时间不能为空')
        return false
      }
      this.submitData()
    },
    submitData() {
      releaseAssessment({
        id: this.form.id,
        signUrl: config.signUrl,
        voteUrl: config.voteUrl,
        signErrorUrl: config.signErrorUrl,
      }).then(res => {
        // const data = res.data
        if (res.status === 200) {
          this.$message.success(res.message || '发布成功')
          this.$emit('pushSuccess', true)
        }
      })
    },
    /* 预览 */
    onPreview() {
      this.$refs.EvaluationView.show()
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>

<style lang="scss" scoped>
.section_con {
  height: 100%;
  background-color: #fff;
  .push_con {
    width: 80%;
    margin: 0 auto;
    font-size: 14px;
    .push_header {
      border-bottom: 1px solid #d7d7d7;
      padding-bottom: 10px;
      color: #999;
      .big_title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-right: 20px;
      }
    }
  }
  .push_body {
    padding: 0 20px;
    .body_title {
      margin: 25px 0 15px;
      color: #999;
      .big_title {
        color: #333;
        margin-right: 20px;
        .bold {
          font-size: 16px;
          color: #1468dd;
        }
      }
    }
    .el-row {
      width: 50%;
      .line {
        text-align: center;
        line-height: 30px;
      }
    }
    .peopleNum {
      color: #1468dd;
      margin-bottom: 10px;
    }
  }
}
/deep/.headerStyle {
  color: #333;
  border-left: 1px solid #eee;

  th,
  div,
  span,
  p {
    font-size: 14px;
  }
}

/deep/.rowClass {
  td,
  div,
  span,
  p {
    font-size: 14px;
  }
}
</style>
